<template>
	<div class="huatijiance">
		<div class="huatijian" v-if="$store.state.denglu">
			<div class="shipinjiancetou">
				<span>话题监测</span>
			</div>
			
			<div class="shipinjianshen">
				<div class="shipinjianshentou">
					<div class="shipinjianshentou1">
						<span>
							<i class="el-icon-notebook-2"></i>
						</span>
						<span>
							共15个任务
						</span>
						<span>
			                查看最新任务状态,请
						</span>
						<span @click="shuxinye">
							刷新
						</span>
					</div>
					<div class="shipinjianshentou2">
						<div>本月已使用<span>6</span>次,剩余<span>497</span>次(含本月赠送<span>497</span>次，充值购满<span>0</span>次)</div>
						<div>
							+话题监测
						</div>
						
					</div>
				</div>
				
				<div class="shipinbiaoge">
					<table cellpadding="0" cellspacing="0">
						<thead>
							<tr>
								<th>任务名称</th>
								<th>状态</th>
								<th>监测时长</th>
								<th>播放量</th>
								<th>参与人数</th>
								<th>操作</th>
							</tr>
						</thead>
						
						<tbody>
							<tr v-for="(item,index) in 5" :key="index">
								<td>
									<div class="shibiaogeleft">
										<img src="../../../assets/img/shuyan.png" />
									</div>
									<div class="shibiaogeright">
										<p>
											网上段子城镇了！酒家司机翻墙逃跑,结果...翻到了武警大院网上段子城镇了！酒家司机翻墙逃跑,结果
										</p>
										<p>
											<img src="../../../assets/img/xiaoyang.png" />
											<span>小辉在路上</span>
										</p>
										<p>
											直播开始时间：2019-02-12 16:50
										</p>
									</div>
								</td>
								<td>
									监测结束
								</td>
								<td>
									60天
								</td>
								<td>
									{{zan | guolv}}
								</td>
								<td>
									{{zan | guolv}}
								</td>
								<td>
									<img class="xianshuju1" src="../../../assets/img/shuju1.png" />
									<img class="xianshuju2" src="../../../assets/img/shuju2.png" />
									<img @click="shanchu(index)" src="../../../assets/img/laji.png" />
								</td>
							</tr>
						</tbody>
					</table>
					
					<el-dialog
					  title="提示"
					  :visible.sync="centerDialogVisible"
					  width="30%"
					  left>
					  <span class="shanchuma">确认删除吗？</span>
					  <span slot="footer" class="dialog-footer">
					    <el-button @click="centerDialogVisible = false">取 消</el-button>
					    <el-button type="primary" @click="queshan">确 定</el-button>
					  </span>
					</el-dialog>
				</div>
				
				<div class="fenye" style="text-align: center;">
					<el-pagination
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					  :hide-on-single-page="yindi"
					  :current-page="currentPage4"
					  :page-sizes="[100, 200, 300, 400]"
					  :page-size="100"
					  layout="total, sizes, prev, pager, next, jumper"
					  :total="4001">
					</el-pagination>
				</div>
				
			</div>
		</div>
		
		<jinzhi :wenben="wenben" v-else></jinzhi>
		
		
	</div>
</template>

<script>
	import jinzhi from "@/components/components/jinzhiye.vue"
	export default{
		name:"huatijiance",
		components:{
			jinzhi
		},
		data(){
			return{
				wenben:"实时跟踪话题数据动态，了解话题实时热度",
				zan:458654,
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
				//数据点赞
				shujuxian:-1,
				
				//删除
				centerDialogVisible:false,
				shanId:''
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			//数据图标hover效果
			$(".xianshuju1").hover(function(){
				$(this).css({"display":'none'});
				$(this).siblings(".xianshuju2").css({"display":'block'});
			},function(){
				$(this).css({"display":'block'});
				$(this).siblings(".xianshuju2").css({"display":'none'});
			})
		},
		methods:{
			//删除
			shanchu(index){
				this.centerDialogVisible = true;
				this.shanId=index;
			},
			//确认删除
			queshan(){
				this.centerDialogVisible = false;
				console.log(this.shanId);
			},
			
			shujudian(index){
				this.shujuxian=index;
			},
			
			//分页
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			
			shuxinye(){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				setTimeout(() => {
				  loading.close();
				  
				  this.$router.go(0)
				}, 2000);
				
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		// padding: 0;
	}
	.huatijiance{
		
		.shipinjiancetou{
			padding: 0 0.6rem;
			height: 100%;
			box-sizing: border-box;
			position: relative;
			
			span{
				font-size: 0.7rem;
				display: inline-block;
				margin-left:0.3rem ;
				color: #333333;
				letter-spacing: 0.05rem;
			}
			
			span::before{
				content: "";
				display: block;
				position: absolute;
				top: 0.3rem;
				left: 0;
				width: 0.3rem;
				height: 1rem;
				background-color: #0091FF;
			}
		}
		
		.shipinjianshen{
			padding: 0.8rem;
			margin-top:1rem ;
			background-color: #fff;
			border-radius:0.1rem ;
			
			.shipinjianshentou{
				
				.shipinjianshentou1{
					float: left;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					span:nth-of-type(1){
						display: block;
						color: #666666;
						font-size: 0.6rem;
					}
					span:nth-of-type(2){
						margin-left:0.4rem ;
						display: block;
						color: #666;
						font-size: 0.4rem;
					}
					span:nth-of-type(3){
						color: #666;
						font-size: 0.4rem;
						margin-left:1rem ;
					}
					span:nth-of-type(4){
						cursor: pointer;
						color: #0091FF;
						font-size: 0.4rem;
					}
				}
				.shipinjianshentou2{
					float: right;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					div:nth-of-type(1){
						display: block;
						color: #666666;
						font-size: 0.4rem;
						margin-right:0.8rem ;
						letter-spacing: 0.05rem;
						span{
							color: #0091FF;
						}
					}
					div:nth-of-type(2){
						margin-right:0.4rem ;
						cursor: pointer;
						display: block;
						color: #0091FF;
						font-size: 0.4rem;
						padding: 0.1rem 0.3rem;
						border: 1px solid #ECECEC;
						border-radius:0.1rem ;
					}
					div:nth-of-type(2):hover{
						background-color:#0091FF ;
						color: #fff;
					}
				}
			}
			.shipinjianshentou::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.shipinbiaoge{
				
				table{
					width: 100%;
					margin-top: 0.6rem;
					
					th{
						color: #333333;
						font-size: 0.5rem;
						padding: 1rem 0;
						font-weight: normal;
					}
					th:nth-of-type(1){
						float: left;
					}
						
					td{
						padding: 0.4rem 0;
						text-align: center;
						color: #333333;
						font-size: 0.4rem;
					}
					td:nth-of-type(1){
						text-align: left;
						width: 15rem;
						.shibiaogeleft{
							float: left;
							img{
								width: 5rem;
							}
						}
						.shibiaogeright{
							margin-left:0.6rem ;
							float: left;
							color: #666;
							
							p:nth-of-type(1){
								width: 8rem;
								font-size: 0.4rem;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
							p:nth-of-type(2){
								margin: 0.6rem 0;
								display: flex;
								align-items: center;
								img{
									width: 0.8rem;
								}
								span:nth-of-type(1){
									display: block;
									text-align: center;
									font-size: 0.35rem;
									margin-left:0.4rem ;
								}
							}
							p:nth-of-type(3){
								width: 6rem;
								font-size: 0.35rem;
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
						}
					}
					td:nth-of-type(1)::after{
						content: "";
						display: block;
						clear: both;
					}
					td:nth-of-type(2){
						color: #00A588;
					}
					td:nth-of-type(6){
						display: flex;
						justify-content: space-around;
						align-items: center;
						padding: 2rem 0rem;
						img{
							width: 0.4rem;
							height: 0.4rem;
							cursor: pointer;
						}
						.xianshuju1{
							// margin-right:0.3rem ;
						}
						.xianshuju2{
							// margin-right:0.3rem ;
							display: none;
						}
					}
				}
				.shanchuma{
					display: block;
					text-align: center;
					font-size: 0.4rem;
				}
			}
		}
		
	}
</style>
